<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商品列表-后台管理系统-Admin 1.0</title>
    <meta name="Description" content="基于layUI数据表格操作"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/weadmin.css">
    <%--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/itemlist.js" charset="utf-8"></script>--%>

    <!--<script type="text/javascript" src="../../static/js/admin.js"></script>-->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-form-switch {
            width: 55px;
        }

        .layui-form-switch em {
            width: 40px;
        }

        .layui-form-onswitch i {
            left: 45px;
        }

        body {
            overflow-y: scroll;
        }
    </style>
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">商品管理</a>
        <a>
          <cite>商品列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#x1002;</i></a>
</div>
<div class="weadmin-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 we-search" onsubmit="return false;">
            商品搜索：
            <div class="layui-inline">
                <input type="text" id="title" name="title" placeholder="请输入商品名称关键字" autocomplete="off"
                       class="layui-input">
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="search" data-type="reload"><i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>
    <div class="weadmin-block demoTable">
        <button class="layui-btn layui-btn-danger" data-type="getCheckData"><i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <button class="layui-btn" onclick="WeAdminShow('添加商品','./add',600,500)"><i class="layui-icon">&#xe61f;</i>添加
        </button>
    </div>
    <table class="layui-hide" id="articleList"  lay-filter="tfilt"></table>


    <script type="text/html" id="operateTpl">
        <a title="编辑" onclick="WeAdminEdit('编辑','./edit', 2, 600, 400)" href="javascript:;">
            <i class="layui-icon">&#xe642;</i>
        </a>
        <a title="删除" href="javascript:;">
            <i class="layui-icon">&#xe640;</i>
        </a>
    </script>
    <%--<script type="text/html" id="shelfTpl">--%>
    <%--<form class="layui-form">--%>
    <%--<input type="checkbox" name="itemstatus" lay-filter="itemstatus" lay-skin="switch" lay-text="正常|下架" {{1==d.status?'checked':''}}/>--%>
    <%--</form>--%>
    <%--</script>--%>
    <script type="text/html" id="myTpl">
        <div class="layui-form">
            <input type="checkbox" name="itemStatus" id="itemStatus" lay-skin="switch" lay-text="正常|下架"
                   {{1==d.status?'checked':''}}/>
        </div>
    </script>

</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    layui.extend({
        admin: '{/}../../static/js/admin'
    });
    //可以引入admin.js，两步走：extend use
    layui.use(['table', 'admin', 'jquery', 'layer','element'], function () {
        var table = layui.table,
            $ = layui.jquery,
            element=layui.element,
            layer = layui.layer;
        //tfilet 为table中lay-filter="tfilt"的值
        table.on('tool(tfilt)',function(obj){



            var event = obj.event;

            if(event == 'del'){

                $.ajax({

                    url:"../../item/del",
                    data:{"pid":obj.data.pid},
                    dataType:"text",
                    success:function(d){
                        if(d=="true"){
                            $(".layui-laypage-btn").click();
                        }
                    },
                    type:"post"

                });
            };

            if(event=='edit'){
                var data = obj.data;
                $.ajax({

                    url:"../../item/edit1",
                    data:{"pid":data.pid},
                    success:function(d){
                        if(d.result==1){

                            window.location.href="../../pages/item/add?"+"pid="+data.pid;
                        }
                    },
                    type:"post",

                });


            };

            if(event=='detail'){


            };

        }),



        table.render({
            //表格属性
            //要渲染的容器
            page: true,
            elem: '#articleList',
            //异步请求
            url: '../../item/list',
            //列
            cols: [[
                //field title 列属性
                {type: 'checkbox'},
                {field: 'pid', title: '商品编号'},
                {field: 'pname', title: '商品名称'},
                {field: 'marketPrice', title: '市场价格'},
                {field: 'pdesc', title: '商品描述'},
                {field: 'isHot', title: '是否热门'},
                {fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]],
            done: function (res, curr, count) {
                console.log($("[data-field='isHot']").children());
                $("[data-field='isHot']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text('热门');
                    }
                    if ($(this).text() == '0') {
                        $(this).text('过时');
                    }
                    if ($(this).text() == '3') {
                        $(this).text('下架');
                    }
                });
                //$.ajax({});
                //$.get();
                //$.post();
//                $.post(
//                    //url:string,异步请求提交给谁处理
//                    'abc',
//                    //data:object,提交什么后台处理
//                    {},
//                    //success:function,成功后的回调函数
//                    function(data){},
//                    //dataType:string
//                    'json'
//                );
                   }
        });

        //批量删除按钮的点击事件
        $('.demoTable .layui-btn-danger').click(function () {
            //获取按钮的data-type属性
            var type = $(this).data('type');
            //console.log(type);
            //三目运算符
            // 如果active[type]为真值，那么就调用它，如果为假值就什么都不做
            active[type] ? active[type].call(this) : '';
        });

        var active = {
            getCheckData: function () {
                //判断是否有选中行
                //获取选中的行
                var data = table.checkStatus('articleList').data;
                //判断长度
                if (data.length > 0) {
                    //至少选中了一行
                    //目的：遍历data这个数组，拿出其中每一个id，放入另外一个数组中即可
                    var ids = [];
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].id);
                    }
                    //目的：发出异步请求，将ids数组传递到后台即可
                    $.post(
                        //url
                        '../../item/batch',
                        //data
                        {'ids[]': ids},
                        //function
                        function(data){
                            console.log(data);
                        }
                        //dataType
                    );

                } else {
                    //没有选中行
                    layer.msg('请至少选中一行再进行删除!', {icon: 2});
                }
            }
        };
    });

</script>



</body>

</html>